<template>
  <div class="index">
    <el-container :style="contentStyleObj">
      <el-header  style="padding: 0">
        <Head></Head>
      </el-header>
      <el-container>
        <el-aside width="200px" style=" background-color:#545c64">
          <Left></Left>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Head from "../public/Header"
import Left from "../public/lift"
export default {
  components:{Head,Left},
  name: 'index',
  data () {
    return {
      contentStyleObj:{
        height:''
      },
    }
  },
  methods:{
    getHeight(){
      this.contentStyleObj.height=window.innerHeight - 16 +'px';
    }
  },

  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },

  destroyed() {
    window.removeEventListener('resize', this.getHeight)
  }
}
</script>

<style scoped>

</style>
